<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">
<style type="text/css">

</style>
</head>
<body>

<ol>
	<li><h2>popover尽量使用a标签来处理（bootstrap的约定）</h2></li>
	<li>data-placement="bottom"--------位置存放</li>
	<li>popover--英文翻译为: 弹出窗口</li>
	<li>进来就显示弹出窗口的话，窗口是不能点击空白处立即消失的，而是需要再点击一次按钮才能够在空白处再次点击把窗口消失的</li>
</ol>

<div class="container">
	<a href="#" class="btn btn-primary js-popo" data-toggle="popover" title="这个是标题" data-content="这是是内容区域" data-placement="bottom" data-trigger="focus">弹出框</a>

	<a href="#" class="popoverB btn btn-primary" data-toggle="popover" data-placement="bottom"  title="标题" data-content="内容">弹出框2</a>
</div>



<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
<script type="text/javascript">

	$(".js-popo").popover()//启用弹出窗口这个方法
	//$(".js-popo").popover('show')//启用弹出窗口从网页进来就显示
	$(".js-popo").on('hidden.bs.popover',function(){
		alert("popover消失之后，hidden.bs.popover事件就会执行这个回调函数")
	})

	$(".popoverB").popover()


</script>

</body>
</html>